<template>
    <div class="box">
      <div class="chart_box">
        <v-chart :options="options" autoresize @click="clickChart" />
      </div>
  
      <!-- <span class="unit">单位: {{ unit }}</span> -->
    </div>
  </template>
  
  <script>
  const labelOption = {
    show: true,
    rotate: 90,
    formatter: '{c}  {name|{a}}',
    fontSize: 16,
    rich: {
      name: {}
    }
  };
  export default {
    name: "ShuangZhuTu",
    components: {},
    props: {
      type: '',
      value: {
        type: Object,
        default: () => {}
      },
      isShowUnit: true,
      isShowLegend: true,
      isShowXData: true
    },
    data() {
      return {
        animalList: [],
        unit: '',
        options: {
          title: {
            text: '',
            top: '',
            left: '40px',
            show: true,
            textStyle: {
              color: '#fff',
              fontSize: '30px'
            }
          },
          grid: {
            left: "5%",
            right: "10%",
            top: "20%",
            bottom: "10%",
            // y 轴 分类名称 全部显示
            containLabel: true
          },
          legend: {
            top: 0,
            right: 20,
            textStyle: {
              color: '#fff'
            }
          },
          // 提示
          tooltip: {
            trigger: "item",
            show: true,
          },
          xAxis: {
            type: "category",
            name: '季度',
            boundaryGap: [0, 0.01],
            data: [],
            splitLine: true,
            nameTextStyle: {
              color: "#fff",
              nameLocation: "start",
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#fff",
                fontSize: 14
              }
            },
            // axisLine: {
            //     show: true
            // }
          },
          yAxis: {
            type: "value",
            name: 'KG',
            nameTextStyle: {     
                // padding: [30, 0, 0, -30],
                color: '#fff'
            },
            data: [],
            inverse: false,
            scale: false,
            axisLabel: {
              show: false,
              textStyle: {
                color: "#fff",
                fontSize: 15,
                fontWeight: '500'
              },
              // rotate: -45
            },
            axisLine: {
                show: true
            },
            // 分割线
            splitLine: {
                lineStyle: {
                color:"#1E90FF",
                width:1
                }, 
                show: false
            }
          },
          series: [
            {
              data: [],
              type: '',
              barWidth: 8,
              barGap: "50%",
              barCategoryGap: "0%",
              color: '#bdaa9c',
              itemStyle: {
                normal: {
                //   shadowColor: "rgba(0,160,221,1)",
                  //模糊细数
                  // shadowBlur: 2,
                  // 圆角
                  // barBorderRadius: [0, 8, 8, 0]
                }
              },
              emphasis: {
                focus: 'series'
              },
              // 标签
              label: {
                show: true,
                position: "top",
                distance: 5,
                fontSize: 14,
                color: '#fff',
                fontWeight: 500,
                formatter: function(params) {
                  return `{span|${params.value}}`
                },
                rich: {
                  span: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: '500',
                    fontFamily: 'font_number1',
                    letterSpacing: '4px'
                  }
                }
              }
            },
            {
              data: [],
              type: "line",
              barWidth: 8,
              barGap: "100%",
              barCategoryGap: "100%",
              color: '#CC454B',
              itemStyle: {
                normal: {
                  shadowColor: "rgba(0,160,221,1)",
                  //模糊细数
                  // shadowBlur: 2,
                  // 圆角
                  // barBorderRadius: [0, 8, 8, 0]
                }
              },
              emphasis: {
                focus: 'series'
              },
              // 标签
              label: {
                show: true,
                position: "top",
                distance: 5,
                fontSize: 14,
                color: '#fff',
                fontWeight: 600,
                formatter: function(params) {
                  return `{span|${params.value}}`
                },
                rich: {
                  span: {
                    color: '#fff',
                    fontSize: '16px',
                    fontWeight: '500',
                    fontFamily: 'font_number`',
                    letterSpacing: '4px'
                  }
                }
              },
            }
          ],
          // 提示
          tooltip: {
            trigger: "axis",
            show: false,
            textStyle: {
              type: 'cross'
            }
          }
        },
      };
    },
    watch: {
      value: {
        handler(val) {
          this.options.xAxis.data = val.x
          this.options.series[0].type = this.type
          this.options.series[0].id = val.data1.id
          this.options.series[0].name = val.data1.name
          this.options.series[0].data = val.data1.data
  
          this.options.series[1].type = this.type
          this.options.series[1].name = val.data2.name
          this.options.series[1].data = val.data2.data
        //   this.unit = val.unit
        },
        
        deep: true
      } 
    },
    mounted() {
  
    },
    methods: {
      clickChart(params) {
        let id = ''
  
        this.animalList.forEach(item => {
          if (params.name == item.name) {
            id = item.id
          }
        })
  
        let obj = {
          id,
          name: params.name
        }
  
        this.$emit('emitChartParams', obj)
      }
    }
  };
  </script>
  
  <style scoped lang="less">
  .echarts {
    width: 100%;
    height: 100%;
    overflow: hidden;
    // border: 1px solid #f00;
  }
  .box {
    width: 100%;
    height: 100%;
    position: relative;
  }
  
  .chart_box {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    // border: 1px solid #f00;
  }
  
  .unit { position: absolute; left: 10px; bottom: 5px; color: #fff; font-size: 14px; }
  
  .s { color: #80efa0; }
  
  </style>
  